<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
   <head>
   <title>Dojo Unified 2D Graphics</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <script type="text/javascript">
   // Dojo configuration
   djConfig = { 
      isDebug: true
   };
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<!--<script type="text/javascript" src="../../src/gfx/vml.js"></script>-->
<!--<script type="text/javascript" src="../../src/gfx/svg.js"></script>-->
<script type="text/javascript">

dojo.require("dojo.gfx.*");
dojo.require("dojo.event.*");
dojo.require("dojo.lang.assert");

var gTestContainer = null;
var gTests = {};

function isEqual(foo, bar, prefix)
{
    var flag = true;
    if( foo != bar ) {
        dojo.debug(prefix+":"+foo + "!=" + bar + " try dig into it" );
        if( typeof(foo) == "string" ) {
            return false;
        } else if ( foo instanceof Array ) {
            for( var i = 0; i< foo.length; i++ ) {
                flag = isEqual(foo[i], bar[i], prefix+"["+i+"]") && flag;
            }
            flag = false;
        } else {
            for(var x in foo) {
                if(bar[x] != undefined ) {
                    flag = isEqual(foo[x], bar[x], prefix+"."+x) && flag;
                } else {
                    dojo.debug(prefix+":"+ x + " is undefined in bar" );
                    flag = false;
                }
            }
        }
    }
    return flag;
}


function getTestSurface(testName, testDescription, width, height) 
{
   width = width ? width : 300;
   height = height ? height : 300;

   // Create a DOM node for the surface
   var testRow = document.createElement('tr');
   var testCell = document.createElement('td');
   var testHolder = document.createElement('div');
   testHolder.id = testName + '_holder';

   testCell.appendChild(testHolder);
   testRow.appendChild(testCell);
   gTestContainer.appendChild(testRow);
   var descRow = document.createElement('tr');
   var desc = document.createElement('td');
   desc.innerHTML = testDescription;
   descRow.appendChild(desc);
   gTestContainer.appendChild(descRow);
   var surface = dojo.gfx.createSurface(testHolder, width, height);
   return surface;
}


function addTest(testName, fn)
{
   gTests[testName] = fn;
}

function runTest_nodebug(testName)
{
   try {
      var t = gTests[testName];
      if (!t) {
         return 'no test named ' + t;
      }
      t(testName);
      return null; // the success condition
   } catch (e) {
      return e.message;
   }
}

function runTest_debug(testName)
{
      var t = gTests[testName];
      if (!t) {
         return 'no test named ' + t;
      }
      t(testName);
      return null; // the success condition
}

var runTest = djConfig.isDebug ? runTest_debug : runTest_nodebug;

function attachAssert(reference, attached, prefix)
{
        dojo.debug(prefix+": check rawNode...");
		dojo.lang.assert( reference.rawNode == attached.rawNode );

		// FIXME: more generic method to compare two dictionary?
		dojo.debug(prefix+": check shape... ");
		isEqual(reference.shape, attached.shape, "shape");
		dojo.debug(prefix+": check matrix... ");
		isEqual(reference.matrix, attached.matrix, "matrix");
		dojo.debug(prefix+": check strokeStyle...");
		isEqual(reference.strokeStyle, attached.strokeStyle, "strokeStyle");
		dojo.debug(prefix+": check fillStyle...");
		isEqual(reference.fillStyle, attached.fillStyle, "fillStyle");
}

dojo.addOnLoad(function() 
{
	gTestContainer = dojo.byId('testcontainer');
	var rect = { x: 0, y: 0, width: 100, height: 100 };

	addTest('attach', function(testName){
		var surface = getTestSurface(testName, 'Attach to an typical shape, skewed rect with color fill, color stroke');
		var ref = surface.createRect(rect)
			.setShape({ width: 75 })
			.setFill([255, 0, 0, 0.5])
			.setStroke({ color: "blue", width: 1 })
			.setTransform({ dx: 50, dy: 50, xx: 1, xy: 0.5, yx: 0.7, yy: 1.1 })
			;
		// now attach it!
		var ar = dojo.gfx.attachNode(ref.rawNode);
        attachAssert(ref, ar, testName);
	});

	addTest('attach2', function(testName){
		var surface = getTestSurface(testName, 'Attach to an line, with null fill, color stroke');
		var ref = surface.createRect(rect)
            .setStroke({color: "red", width: 1})
            .setTransform({ dx:70, dy: 100 })
			;
        surface.createRect(rect)
            .setFill([0, 255, 0, 0.6])
            .setTransform({ dx:50, dy:80 })
            ;
		// now attach it!
		var ar = dojo.gfx.attachNode(ref.rawNode);
        attachAssert(ref, ar, testName);
	});

	addTest('attach3', function(testName){
		var surface = getTestSurface(testName, 'Attach to an circle, with color fill, null stroke');
		var circle = { cx: 130, cy: 130, r: 50 };
		var ref = surface.createCircle(circle)
            .setFill([0, 255, 0, 0.7])
            .setTransform({ dx: 20, dy: 20 })
            ;
		
		// now attach it!
		var ar = dojo.gfx.attachNode(ref.rawNode);
        attachAssert(ref, ar, testName);
	});

	addTest('attach_line', function(testName){
		var surface = getTestSurface(testName, 'Attach to an line, with color fill, color stroke');
		var line = { x1: 0, y1:0, x2:80, y2:80 };
		var ref = surface.createLine(line)
            .setFill([0, 255, 0, 0.7])
            .setStroke({color:[0, 0, 255, 0.7], width:3} )
            .setTransform({ dx: 20, dy: 20 })
            ;
		
		// now attach it!
		var ar = dojo.gfx.attachNode(ref.rawNode);
        attachAssert(ref, ar, testName);
	});

	addTest('attach_image', function(testName){
		var surface = getTestSurface(testName, 'Attach to an image, with color fill, color stroke');
        var image = {
            width: 96, height: 96,
            src: "http://dojotoolkit.org/img/viewcvs.png"
        };
		var ref = surface.createImage(image)
            .setFill([0, 255, 0, 0.7])
            .setStroke({color:[0, 0, 255, 0.7], width:3} )
            .setTransform({ dx: 20, dy: 20 })
            ;
		
		// now attach it!
		var ar = dojo.gfx.attachNode(ref.rawNode);
        attachAssert(ref, ar, testName);
	});

	addTest('attach_path', function(testName){
		var surface = getTestSurface(testName, 'Attach to an path, with null fill, color stroke');
		var ref = surface.createPath()
			.moveTo(10, 20).lineTo(80, 150)
			.setAbsoluteMode(false).lineTo(40, 0)
			.setAbsoluteMode(true).lineTo(180, 100)
			.setAbsoluteMode(true).curveTo(10, -80, -150, -10, -90, -10)
			.closePath()
            .setStroke({color:[0, 0, 255, 0.7], width:1} )
            .setTransform({ dx: 120, dy: 120 })
            ;
		
		// now attach it!
		var ar = dojo.gfx.attachNode(ref.rawNode);
        attachAssert(ref, ar, testName);
	});

	addTest('attach_polyline', function(testName){
		var surface = getTestSurface(testName, 'Attach to polyline, with color stroke, color fill');
		var points = [ {x:70, y:15}, {x:40, y:70}, {x:100, y:80}, {x:130, y:-20}];
		var ref = surface.createPolyline(points)
            .setFill([0, 255, 0, 0.7])
            .setStroke({color:[255, 0, 0, 0.7], width:1})
            .setTransform({ dx: 50, dy: 20 })
            ;
		
		// now attach it!
		var ar = dojo.gfx.attachNode(ref.rawNode);
        attachAssert(ref, ar, testName);
	});

	addTest('attach_gradient', function(testName) {
		var surface = getTestSurface(testName, 'attach gradient fill');
		var lg = {
			type: "linear",
			x1: 0, y1: 0, x2: 75, y2: 50,
			colors: [
				{ offset:   0, color: "#F60" },
				{ offset: 0.5, color: "#FAF" },
				{ offset:   1, color: "#FF6" }
			]
		};

		var ref = surface.createRect(rect)
            .setFill(lg)
            .setTransform({ dx: 40, dy: 100 });

		// now attach it!
		var ar = dojo.gfx.attachNode(ref.rawNode);
        attachAssert(ref, ar, testName);
	});

	addTest('attach_pattern', function(testName) {
		var surface = getTestSurface(testName, 'attach pattern fill');
        var pattern = {
            type: "pattern",
            x: 0, y: 0, width: 120, height: 96,
            src: "http://dojotoolkit.org/img/viewcvs.png"
        };

	    var ellipse = {cx: 150, cy: 100, rx: 150, ry: 100};
		var ref = surface.createEllipse(ellipse)
            .setStroke({color: "blue", width: 1 })
            .setFill(pattern)
            ;

		// now attach it!
		var ar = dojo.gfx.attachNode(ref.rawNode);
        attachAssert(ref, ar, testName);
    });

	addTest('attach_radial', function(testName) {
		var surface = getTestSurface(testName, 'attach radial gradient fill');
		var rg = {
			type: "radial",
			cx: 100, cy: 100, r: 100,
			colors: [
				{ offset:   0, color: "red" },
				{ offset: 0.5, color: "green" },
				{ offset:   1, color: "blue" }
			]
		};

	    var circle = {cx: 100, cy: 100, r: 100 };
		var ref = surface.createCircle(circle)
            .setStroke({color: "blue", width: 1 })
            .setFill(rg)
			.setTransform({dx: 40, dy: 30})
            ;

		// now attach it!
		var ar = dojo.gfx.attachNode(ref.rawNode);
        attachAssert(ref, ar, testName);
    });

	var gTestsToRun = [
		'attach',
		'attach2',
		'attach3',
        'attach_line',
        'attach_polyline',
        'attach_image',
        'attach_path',
        'attach_gradient',
        'attach_radial',
        'attach_pattern'
    ];

	for (var i = 0; i < gTestsToRun.length; ++i) {
		var testName = gTestsToRun[i];
		var err = runTest(testName);
		if (err) {
			getTestSurface(testName, testName + ' FAILED (' + err + ')');
		}
	}
}); // end onload
</script>
<style>
   td { border: 1px solid black; text-align: left; vertical-align: top; }
   v:group { text-align: left; }
</style>
   </head>
   <body>
   <table>
   <tbody id="testcontainer">
   </tbody>
   </table>
   </body>
   </html>


